<template>
	<view class="member-center">
		<view class="header" :class="isEs?'header-es':''" :style="isEs?' background-image: url('+staticFileUrl+'/image/member/es-member.jpg)':''">
			<view class="header-bg" :style="isEs?'':'background-color: rgb(126, 125, 243);'">
				<!-- 椭圆形背景 -->
			</view>
			<!-- #ifdef MP-WEIXIN || H5 -->
			<view class="business" @click="store()" v-if="storeName">
				<image style="height: 36rpx;width: 36rpx;" :src="`${staticFileUrl}/image/member/business.png`"></image>
				<view class="store">{{storeName}}</view>
				<view class="u-m-l-10">
					<u-icon v-if="!showStore" name="arrow-down" color="rgb(255, 255, 255)" size="14"></u-icon>
					<u-icon v-else name="arrow-up" color="rgb(255, 255, 255)" size="14"></u-icon>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<picker :value="index" v-if="storeName" range-key="storeName" :range="merchantStore[0]"
				@change="confirmStore">
				<view class="business">
					<image style="height: 36rpx;width: 36rpx;" :src="`${staticFileUrl}/image/member/business.png`">
					</image>
					<view class="store">{{storeName}}</view>
					<view class="u-m-l-10">
						<u-icon v-if="!showStore" name="arrow-down" color="rgb(255, 255, 255)" size="14"></u-icon>
						<u-icon v-else name="arrow-up" color="rgb(255, 255, 255)" size="14"></u-icon>
					</view>
				</view>
			</picker>
			<!-- #endif -->
			<view class="member-info">
				<view class="avatar">
					<image :src="memberInfo.headImgUrl" mode="widthFix"
						style="width: 120rpx; height: 120rpx;border-radius: 50%" />
				</view>
				<view @click="showLoginPopup()">
					<view class="member-name">
						<view>
							<view class="name-box">
								<view class="u-lint-ellipsis-1" style="margin-right: 5rpx;">
									<view
										v-if="!memberInfo.nickName || memberInfo.nickName == '微信用户' || memberInfo.nickName == '支付宝用户'">
										点击登录更优惠
									</view>
									<view v-else>{{memberInfo.nickName}}</view>
								</view>

								<image :src="nameIcon" mode="widthFix"
									style="width: 38rpx;height: 38rpx;margin-top: 4rpx;flex: none;" />
							</view>
							<view class="tips-box"
								v-if="!memberInfo.nickName || memberInfo.nickName == '微信用户' || memberInfo.nickName == '支付宝用户'">
								授权获取账号信息
							</view>
						</view>
					</view>

				</view>
				<view>
					<image v-if="!isEs" style="width: 220rpx;height: 128rpx;"
						:src="`${staticFileUrl}/image/member/elephant.png`">
					</image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="card my-order" v-if="!isEs">
				<view class="title" @click.stop="doMyOrder(-1)">{{$t('member-center.myOrder')}}</view>
				<view class="order-state">
					<!-- mode="widthFix"  兼容支付宝小程序-->
					<view class="order-state-item" @click.stop="doMyOrder(-1)">
						<image :src="`${staticFileUrl}/image/member/all-order-icon.png`" mode="widthFix"
							style="width: 44rpx;height: 44rpx;" />
						<view class="desc">{{$t('member-center.all')}}</view>
					</view>
					<view class="order-state-item" @click.stop="doMyOrder(0)">
						<image :src="`${staticFileUrl}/image/member/wait-pay-icon.png`" mode="widthFix"
							style="width: 44rpx;height: 44rpx;" />
						<view class="desc">{{$t('member-center.toBePaid')}}</view>
					</view>
					<view class="order-state-item" @click.stop="doMyOrder(4)">
						<image :src="`${staticFileUrl}/image/member/conducting-icon.png`" mode="widthFix"
							style="width: 44rpx;height: 44rpx;" />
						<view class="desc">{{$t('member-center.inProgress')}}</view>
					</view>
					<view class="order-state-item" @click.stop="doMyOrder(2)">
						<image :src="`${staticFileUrl}/image/member/completed-icon.png`" mode="widthFix"
							style="width: 44rpx;height: 44rpx;" />
						<view class="desc">{{$t('member-center.completed')}}</view>
					</view>
					<view class="order-state-item" @click.stop="doMyOrder(7)">
						<image :src="`${staticFileUrl}/image/member/refunded-icon.png`" mode="widthFix"
							style="width: 44rpx;height: 44rpx;" />
						<view class="desc">{{$t('member-center.refunded')}}</view>
					</view>
				</view>
			</view>
			<view class="footer-version" v-if="version">
				Version {{version}}
			</view>
		</view>
		<login-popup ref="loginPopupRef"></login-popup>
		
		<u-picker :show="showStore" :cancelText="$t('lottery-details.cancel')" :confirmText="$t('lottery-details.ok')"
			@cancel="showStore=false" @confirm="confirmStore($event)" :columns="merchantStore" keyName="storeName"
			:defaultIndex="[index]" />
		<tabbar v-if="isEs" ref="tab"></tabbar>
	</view>

</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				index: 0,
				showStore: false,
				coinShow: false,
				storeName: '',
				deviceNo: '',
				merchantStore: [],
				staticFileUrl: this.$configPath.staticFileUrl,
				bgColor: 'transparent',
				titleStyle: 'color:white',
				leftIconColor: 'white',
				nameIcon: this.$configPath.staticFileUrl + '/image/member/name-icon.png',
				memberInfo: {
					nickName: '', //会员名字
					headImgUrl: this.$configPath.staticFileUrl + '/image/common/member-header-image-default.svg',
					haveFetchCoinPwd: false,
					mobile: null,
				},
				isWxWork: false,
				show: false, //领币弹窗

				popupShow: true,
				verifyCodeQr: null,
				version: '', //版本号
				registerKey: '',
				merchantStoreId: '',
				//是否 通过 pos端展示注册二维码进入
				posRegister: false,

				// 套票张数
				ticketPackageCount: 0,
				//待使用卡券数
				toBeUsedActivityTotal: 0,
				//卡券总数
				activityTotal: 0,
				//是否是西班牙语
				isEs: this.$i18n.locale == 'es',
        storageKeyEnum : this.$storageKeyEnum,
			};
		},
		watch: {
			merchantStore(val, oldVal) {
				console.log("触发监听", this.merchantStore[0][this.index])
				if (getApp().globalData.currMerchantStore.id) {
					for (let i = 0; i < val[0].length; i++) {
						if (val[0][i].id === getApp().globalData.currMerchantStore.id) {
							this.index = i;
							this.storeName = this.merchantStore[0][i].storeName
							// console.log("this.index", this.index)
							break;
						}
					}
				} else {
					this.index = 0;
					if (this.$u.test.isEmpty(getApp().globalData.currMerchantStore.id)) {
						// console.log("默认场地ID", this.merchantStore[0][this.index].id)
						getApp().globalData.currMerchantStore.id = this.merchantStore[0][this.index].id;
					}
					if (this.$u.test.isEmpty(getApp().globalData.currMerchantStore.storeName)) {
						// console.log("默认场地名称", this.merchantStore[0][this.index].storeName)
						getApp().globalData.currMerchantStore.storeName = this.merchantStore[0][this.index].storeName;
					}
				}
				this.storeName = this.merchantStore[0][this.index].storeName;

				this.getMemberAndMerchantStore(this.merchantStore[0][this.index].id);
				this.findTicketRecordCountByMsId(this.merchantStore[0][this.index].id);
			}
		},
		onLoad(options) {
			this.autoRegister(options);
			// #ifdef  MP-ALIPAY || MP-WEIXIN
			this.version = uni.getAccountInfoSync().miniProgram.version;
			// #endif
			// #ifdef  H5
			//H5环境下 如果是西班牙语就隐藏底部导航栏
			//获取语言并设置
			if (options.language) {
				this.$i18n.locale = options.language;
				uni.setStorageSync('lang', options.language);
			}
			// #endif
		},
		//下拉刷新，如果没登录先授权登录
		onPullDownRefresh() {
			this.findMemberInfo();
		},
		onShow() {
			this.isEs = this.$i18n.locale == 'es'
			if (this.isEs) {
				uni.hideTabBar()
				this.$nextTick(() => {
					this.$refs.tab.show = getApp().globalData.tab.show
					this.$refs.tab.name = getApp().globalData.tab.name
				})
			}
			// #ifdef  MP-WEIXIN || H5
			this.findMemberInfo();
			// #endif

			// #ifdef  MP-ALIPAY
			this.findMemberInfo();
			// #endif

			// #ifdef  MP-TOUTIAO
			this.findMemberInfo();
			// #endif

		},
		// 展示可以分享到朋友圈
		onShareTimeline(res) {},
		methods: {
			navService() {
				//#ifdef MP-ALIPAY
				uni.navigateTo({
					url: '/pages-other/service/service'
				});
				//#endif

				//#ifdef H5
				location.href = 'https://kefu.ywkefu.com/admin/api/chatGroup/chat/37'
				//#endif
			},

			store() {
				this.showStore = true
			},
			confirmStore(e) {
				//#ifdef MP-WEIXIN || H5
				this.storeName = e.value[0].storeName
				this.index = e.indexs
				//#endif
				//#ifdef MP-ALIPAY
				this.storeName = this.merchantStore[0][e.detail.value].storeName
				this.index = e.detail.value
				//#endif

				getApp().globalData.currMerchantStore.id = this.merchantStore[0][this.index].id
				getApp().globalData.currMerchantStore.storeName = this.storeName

				this.showStore = false
				this.findTicketRecordCountByMsId(this.merchantStore[0][this.index].id);
				this.getMemberAndMerchantStore(this.merchantStore[0][this.index].id);
			},
			nav(url) {
				uni.navigateTo({
					url: url
				})
			},
			temporaryCurrency() {
				this.coinShow = true
			},
			coinShowModul(item) {
				this.nav(item.url);
			},
			/**
			 * pos端展示二维码，用户使用微信、支付宝扫码
			 * 小程序已有自动注册功能，这里需要做的就是在后端把当前会员ID存到registerKey缓存中
			 * 保存完成后前端主动调起会员码
			 * @param options
			 */
			autoRegister(options) {
				let scan_url;
				// #ifdef  MP-WEIXIN
				if (options.q) {
					scan_url = decodeURIComponent(options.q);
					console.log('scan_url_1:' + scan_url);
				}
				// #endif
				// #ifdef  MP-ALIPAY
				let oo = my.getLaunchOptionsSync();
				if (oo.query && oo.query.qrCode) {
					scan_url = oo.query.qrCode;
					console.log('scan_url_2:' + scan_url);
				}
				// #endif
				if (scan_url) {
					const urlParams = this.$helpers.getUrlParams(scan_url);
					if (urlParams.registerKey) {
						this.posRegister = true;
						this.registerKey = urlParams.registerKey;
					}
					if (urlParams.merchantStoreId) {
						this.merchantStoreId = urlParams.merchantStoreId;
					}
					if (urlParams.deviceNo) {
						this.deviceNo = urlParams.deviceNo;
						if ("app" == urlParams.source) {
							//安卓端会员扫码登录
							this.noticeAppLoginSuc();
						}
					}
				}
			},
			cacheMemberId() {
				this.$api('member.cacheMemberId', {
					newRegisterMemberKey: this.registerKey,
					merchantStoreId: this.merchantStoreId
				}).then(res => {
					if (res.status == 0) {
						console.log("成功存储缓存")
						this.posRegister = false;
						uni.switchTab({
							url: '/pages/member/qr-code/qr-code'
						});
					}
				})
			},
			showLoginPopup() {
				if (!this.memberInfo.nickName || this.memberInfo.nickName == '微信用户' || this.memberInfo.nickName ==
					'支付宝用户') {
					this.$refs.loginPopupRef.loginShow();
				}
			},

			toPage(url) {
				let params;
				if (url == 'set-password') {
					this.checkMobileAndFetchCoinPwd();
					return
				}
				this.$Router.push({
					name: url,
					params: params,
				});
			},
			doMyOrder(status) {
				var params = {
					status: status
				}
				this.$Router.push({
					name: "my-order",
					params: params,
				});
			},
			checkMobileAndFetchCoinPwd() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api('member.info', null).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.memberInfo = res.data;
						console.log("this.memberInfo:", this.memberInfo);

						if (this.$u.test.isEmpty(this.memberInfo)) {
							// 获取用户信息为空
							// console.log(11111111)
							getApp().err("获取会员数据不成功");
						} else if (this.$u.test.isEmpty(this.memberInfo.mobile) || !this.memberInfo
							.haveFetchCoinPwd) {
							// 手机号为空；手机号不为空并且未设置密码
							// console.log(222222222)
							this.$Router.push({
								name: 'member-set-fetch-coin-pwd',
								params: {},
							});
						} else if (!this.$u.test.isEmpty(this.memberInfo.mobile) && this.memberInfo
							.haveFetchCoinPwd) {
							// 手机号、取币密码都设置了
							// console.log(33333333)
							this.$Router.push({
								name: 'set-password',
								params: {},
							});
						} else {
							getApp().err("未知参数选项");
						}

					} else {
						getApp().err("会员数据加载不成功：" + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			},

			findMemberInfo() {
				this.$api('member.info', null).then(res => {
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.memberInfo = res.data;
						if (this.posRegister) {
							this.cacheMemberId();
						}
						this.findRecentlyMerchantStoreByMember();
					} else {
						getApp().err("会员数据加载不成功：" + res.msg);
					}

				}).catch(err => {
					uni.stopPullDownRefresh();
				})
			},
			findRecentlyMerchantStoreByMember() {
				this.$api('merchantStore.findRecentlyMerchantStoreByMember', null).then(res => {
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.merchantStore = new Array();
						if (!this.$u.test.isEmpty(res.data)) {
							this.merchantStore.push(res.data)
						}
						// console.log("看看", this.merchantStore[0][index])
					} else {
						getApp().err("会员场地信息查询失败：" + res.msg);
					}

				}).catch(err => {
					uni.stopPullDownRefresh();
				})
			},
			findTicketRecordCountByMsId(merchantStoreId) {
				if (!merchantStoreId) {
					return
				}
				this.$api('ticketRecord.findTicketRecordCountByMsId', {
					merchantStoreId: merchantStoreId
				}).then(res => {
					if (res.status == 0) {
						this.ticketPackageCount = res.data;
					} else {
						getApp().err("套票数获取异常：" + res.msg);
					}

				}).catch(err => {
					console.log(err);
				})
			},

			getMemberAndMerchantStore(merchantStoreId) {
				if (!merchantStoreId) {
					return
				}
				this.$api('activity.getMemberAndMerchantStore', {
					merchantStoreId: merchantStoreId
				}).then(res => {
					if (res.status == 0) {
						this.toBeUsedActivityTotal = res.data.toBeUsedActivityTotal;
						this.activityTotal = res.data.activityTotal;
					} else {
						getApp().err("卡券信息获取异常：" + res.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * 安卓屏端会员扫码登录后，通知安卓屏
			 */
			noticeAppLoginSuc() {
				let param = {
					deviceNo: this.deviceNo
				}
				this.$api('member.noticeAppLoginSuc', param).then(res => {}).catch(err => {})
			}

		}
	}
</script>
<style lang="scss" scoped>
	.card-coupons-box {
		display: flex;

		.to-be-used {
			height: 32rpx;
			margin-left: 18rpx;
			padding: 2rpx 14rpx;
			font-size: 20rpx;
			color: rgb(255, 255, 255);
			background: rgb(255, 97, 97);
			border-radius: 10rpx 10rpx 10rpx 0rpx;
		}
	}

	.coinPopup {
		width: 700rpx;
		height: 514rpx;
		background: rgb(255, 255, 255);
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		/deep/ .u-grid-item {
			height: 100rpx;
		}

		.know {
			color: rgb(126, 125, 243);
			font-size: 28rpx;
			letter-spacing: 1rpx;
			text-align: center;
			margin-top: 54rpx;
		}

		.coin {
			text-align: center;
			margin: 60rpx 0rpx;
			color: rgb(0, 0, 0);
			font-size: 36rpx;
		}

		.coin-bg {
			width: 644rpx;
			height: 205rpx;
			background: rgb(239, 242, 255);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.name-box {
		margin-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tips-box {
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.margin-bottom-60 {
		margin-bottom: 60rpx;
	}

	.member-center {

		//letter-spacing: 1rpx;
		.header-es {
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.header {
			position: relative;
			width: 100%;
			height: 280rpx;
			overflow: hidden;

			/*  #ifndef MP-TOUTIAO */
			padding-top: 200rpx;
			/*  #endif  */
			/*  #ifdef MP-TOUTIAO */
			padding-top: 100rpx;
			/*  #endif  */
			color: #FFFFFF;
			//#ifdef H5
			padding-top: 80rpx;

			// #endif
			.header-bg {
				z-index: 0;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 350%;
				height: 3000rpx;
				background-size: 100%;
				background-repeat: no-repeat;
				//background-color: rgb(126, 125, 243);
				border-radius: 50%;
			}

			.business {
				position: absolute;
				z-index: 1;
				top: 120rpx;
				// #ifdef  H5
				top: 30rpx !important;
				// #endif
				display: flex;
				align-items: center;
				margin-left: 25rpx;

				.store {
					font-size: 30rpx;
					color: rgba(255, 255, 255, 0.9);
					padding-left: 15rpx;
				}
			}

			.member-info {
				position: relative;
				z-index: 1;
				display: flex;
				flex-direction: row;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					margin-left: 30rpx;
				}

				.member-name {
					width: 300rpx;
					align-items: center;
					margin-left: 20rpx;

				}

				.member-level {
					width: 131rpx;
					margin-top: 20rpx;
					padding: 7rpx 0rpx;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 60rpx;
					text-align: center;
					color: rgba(255, 255, 255, 0.9);
					font-size: 22rpx;
					margin-left: 20rpx;
				}

				.member-right-wrap {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-right: 45rpx;

					.check-code {
						height: 30rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
					}
				}

			}

		}

		// #ifdef H5
		.grid-h5 {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-column-gap: 24rpx;
			grid-row-gap: 20rpx;

			.grid-h5-center {
				display: flex;
				justify-content: center;
				flex-direction: column;
				text-align: center;
			}
		}

		// #endif
		.content {
			position: relative;
			z-index: 1;
			padding: 25rpx;

			margin-top: -150rpx;

			.property {
				// margin: 50rpx 25rpx 0rpx 25rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				// padding: 35rpx 0;
				border-radius: 20rpx;

				.list {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.es-item {
						width: calc(100% / 2) !important;
					}

					.item {
						width: calc(100% / 4);
						min-height: 182rpx;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;

						position: relative;

						.number {
							color: rgb(34, 34, 34);
							font-size: 36rpx;
							font-weight: 600;
						}

						.title {
							color: rgb(102, 102, 102);
							font-size: 24rpx;

							margin-top: 24rpx;
						}
					}

					.item::before {
						content: " ";
						width: 1rpx;
						height: 66rpx;
						background-color: rgba(0, 0, 0, 0.08);
						position: absolute;
						right: 0;
						top: 38%;
					}

					.item:last-child::before {
						display: none;
					}
				}
			}

			.coupon-card-list {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.coupon-card {
					flex: 1;
					background-color: white;
					border-radius: 20rpx;
					padding: 30rpx 30rpx 35rpx 30rpx;
					margin-right: 20rpx;
					position: relative;
					overflow: hidden;

					.item {
						position: relative;
						z-index: 1;

						.title {
							color: rgb(102, 102, 102);
							font-size: 24rpx;
						}

						.value {
							margin-top: 24rpx;
							color: rgb(34, 34, 34);
							font-size: 36rpx;
							font-weight: 600;
						}
					}

					.img {
						position: absolute;
						right: -70rpx;
						bottom: -45rpx;
						z-index: 0;
					}
				}

				.coupon-card:last-child {
					margin-right: 0;
				}
			}

			.esH5 {
				padding: 35rpx 15rpx !important;

				.order-state {
					display: grid !important;
					grid-template-columns: repeat(4, 1fr) !important;
				}

				.title {
					margin-bottom: 0rpx !important;
				}

				.order-state-item {
					margin-top: 30rpx;
				}
			}

			.card {
				// margin: 0 25rpx 30rpx 25rpx;
				background-color: #FFFFFF;
				padding: 35rpx;
				border-radius: 20rpx;

				.title {
					color: rgba(0, 0, 0, 0.9);
					font-size: 30rpx;
					line-height: 40rpx;
					margin-bottom: 40rpx;
				}
			}

			.my-order {
				// margin-top: -116rpx;
				margin-bottom: 20rpx;

				.order-state {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-top: 8rpx;
					margin-left: 10rpx;

					.order-state-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.desc {
							color: rgba(0, 0, 0, 0.67);
							font-size: 26rpx;
							line-height: 34rpx;
							margin-top: 30rpx;
						}
					}
				}

			}

			.my-service {
				padding-bottom: 0;

				.item-title {
					color: rgba(0, 0, 0, 0.6);
					padding: 18rpx 0 47rpx 0rpx;
					font-size: 26rpx;
				}

				/deep/ .u-grid-item {
					position: relative;

					.do-contact {
						width: 156rpx;
						height: 140rpx;
						position: absolute;
						top: 0rpx;
						opacity: 0;
						left: 0rpx;
						z-index: 100;
					}
				}
			}

			.footer-version {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.5);
				display: flex;
				justify-content: center;
				margin: 30rpx 0;
			}
		}



	}
</style>
